import {
  InfoCircleOutlined,
  // UpCircleTwoTone,
  // DownCircleTwoTone,
} from '@ant-design/icons';
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';
import { Col, Row, DatePicker, Space } from 'antd';
import './index.scss'
import jiantou1 from '../../assetsPro/jiantou1.png'
import jiantou2 from '../../assetsPro/jiantou2.png'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

function Home() {
  
  const { RangePicker } = DatePicker;
    const domRef = useRef()
    const chartInit = () => {
        const myChart = echarts.init(domRef.current);

        // 绘制图表
myChart.setOption({
  
   xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1, 3, 2, 4, 8, 4, 1],
      type: 'line',
      areaStyle: {}
    }
  ]
})
  }
  
    useEffect(() => {
        chartInit()
    }, [])
  const onChange = (value, dateString) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };

  const onOk = (value) => {
    console.log('onOk: ', value);
  };
    return (
      <div className='home-body'>      
        <Row gutter={16} className=''>
          <Col className="gutter-row" span={6}>
            <div className='div-4 div-4-1'>
            <div className='div-hr'>
                <Row className='Row-Col'>
                  <Col span={8}><div className='home-from-div-line1-1'>总销售额</div></Col>
                  <Col span={14}></Col>
                  <Col span={2}><InfoCircleOutlined /></Col>
                </Row>
                <Row className='Row-Col'>
                  <Col span={24}><div className='home-from-div-line1-2'>￥126,560</div></Col>
                </Row>
                <Row className='Row-Col'>
                  <Col span={6}><div className='home-from-div-line1-3'>周同比&nbsp;<span className='home-from-div-line1-4'>12%</span></div></Col>
                  <Col span={10}><img className='jiantou' src={jiantou1} alt=""/></Col>
                  <Col span={6}><div className='home-from-div-line1-3'>日环比&nbsp;<span className='home-from-div-line1-4'>11%</span></div></Col>
                  <Col span={2}><img className='jiantou' src={jiantou2} alt=""/></Col>
                </Row>
              </div>
              <div>
                <Row className='Row-Col'>
                  <Col span={24}><div><span className='home-from-div-line1-5'>日均销售额</span><b className='home-from-div-line1-6'>￥12,423</b></div></Col>
                </Row>
              </div>
              </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className='div-4 div-4-2'>
              <div className='div-hr'>
                <Row className='Row-Col'>
                  <Col span={8}><div className='home-from-div-line1-1'>访问量</div></Col>
                  <Col span={14}></Col>
                  <Col span={2}><InfoCircleOutlined /></Col>
                </Row>
                <Row className='Row-Col'>
                  <Col span={24}><div className='home-from-div-line1-2'>8,846</div></Col>
                </Row>
                <Row className='Row-echarts'>
                  {/* 图表 */}
                  <div ref={domRef} className='echarts'></div>
                </Row>
              </div>
              
                <div>
                <Row className='Row-Col'>
                  <Col span={24}><div><span className='home-from-div-line1-5'>日访问量</span><b className='home-from-div-line1-6'>1,234</b></div></Col>
                </Row>
              </div>
            </div>
          </Col>
          <Col className="gutter-row " span={6}>
            <div className='div-4 div-4-3'>
              <div className='div-hr'>
                <Row className='Row-Col'>
                  {/* <Col span={2}></Col> */}
                  <Col span={8}><div className='home-from-div-line1-1'>支付笔数</div></Col>
                  <Col span={14}></Col>
                  <Col span={2}><InfoCircleOutlined /></Col>
                </Row>
                <Row className='Row-Col'>
                  <Col span={24}><div className='home-from-div-line1-2'>6,560</div></Col>
                </Row>
                <Row className='Row-Col'>
                  {/* 图表 */}
                  <div></div>
                </Row>
              </div>
                <div>
                <Row className='Row-Col'>
                  <Col span={24}><div><span className='home-from-div-line1-5'>转化率</span><b className='home-from-div-line1-6'>60%</b></div></Col>
                </Row>
              </div>
            </div>
          </Col>
          <Col className="gutter-row " span={6}>
            <div className='div-4 div-4-4'>
              <div className='div-hr'>
                <Row className='Row-Col'>
                  <Col span={14}><div className='home-from-div-line1-1'>线上购物转化率</div></Col>
                  <Col span={8}></Col>
                  <Col span={2}><InfoCircleOutlined /></Col>
                </Row>
                <Row className='Row-Col'>
                  <Col span={24}><div className='home-from-div-line1-2'>78%</div></Col>
                </Row>
                <Row className='Row-Col'>
                  {/* 图表 */}
                  <div></div>
                </Row>
              </div>
              <div>
                <Row className='Row-Col'>
                  <Col span={6}><div className='home-from-div-line1-3'>周同比&nbsp;<span className='home-from-div-line1-4'>12.3%</span></div></Col>
                  <Col span={10}><img className='jiantou' src={jiantou1} alt=""/></Col>
                  <Col span={6}><div className='home-from-div-line1-3'>日环比&nbsp;<span className='home-from-div-line1-4'>11%</span></div></Col>
                  <Col span={2}><img className='jiantou' src={jiantou2} alt=""/></Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>

        
        <div>
          <Row>
            <Col span={3}>销售额</Col>
            <Col span={3}>访问量</Col>
            <Col span={3}>今日</Col>
            <Col span={3}>本周</Col>
            <Col span={3}>本月</Col>
            <Col span={3}>全年</Col>
            <Col span={3}>
              <Space direction="vertical" size={12}>
                <RangePicker
                  locale={locale}
                  showTime={{
                  format: 'HH:mm',
                  }}
                  format="YYYY-MM-DD HH:mm"
                  onChange={onChange}
                  onOk={onOk}
                  />
                  
                </Space>
            </Col>
          </Row>
        </div>
      </div>
    )
    
}

export default Home